<template>
	<view class="cascader-wrap">
		<view class="flex-1" style="flex-direction: column;display: flex;">
			<text v-for="(item,index) in options" :key="index" class="mt-20 label-text"
				@click="onSelectCol1(index)">{{item.label}}</text>
		</view>
		<view class="flex-1" v-if="col2.length">
			<text v-for="(item,index) in col2" :key="index" class="mt-20 label-text">{{item.label}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Cascader",
		props: {
			options: {
				type: Array,
				default: () => new Array()
			},
		},
		data() {
			return {
				col2: []
			};
		},
		methods: {
			onSelectCol1(index) {
				this.col2 = this.options[index].childer ? this.options[index].childer : []
			}
		},
	}
</script>

<style lang="scss">
	.cascader-wrap {
		// #ifdef APP-NVUE
		flex-direction: row;
		// #endif
		display: flex;
	}

	.flex-1 {
		flex: 1;
		//#ifndef APP-NVUE
		display: flex;
		//#endif
		flex-direction: column;
	}

	.label-text {
		// #ifndef APP-NVUE
		font-size: 30rpx;
		//#endif

		// #ifdef APP-NVUE
		font-size: 14px;
		//#endif
		flex: 1;
		text-align: center;
	}
</style>
